<template>
    <a-card :bordered="false">
      <detail-list title="优惠券详情">
        <a-divider style="margin-bottom: 32px"/>

        <detail-list-item term="标题">{{couponCardTitle}}</detail-list-item>

        <detail-list-item term="优惠类型">{{model.preferentialType == 1?"代金卷":"折扣卷"}}</detail-list-item>

        <detail-list-item term="领取类型">{{model.takeType == 0?"用户主动领取":"后台自动发放"}}</detail-list-item>

        <detail-list-item term="是否设置满多少金额可用">{{model.priceAvailable == 0?"不限制":"大于"+model.priceOff+"可用"}}</detail-list-item>

        <detail-list-item term="折扣">{{model.percentOff == null?"无":model.percentOff}}</detail-list-item>

        <detail-list-item term="优惠金额">{{model.priceOff}}</detail-list-item>

        <detail-list-item term="优惠码状态">
          <span v-if="couponCardStatus == 0">没有</span>
          <span v-else-if="couponCardStatus == 1">未使用</span>
          <span v-else-if="couponCardStatus == 2">已使用</span>
          <span v-else-if="couponCardStatus == 3">已失效</span>
        </detail-list-item>

        <detail-list-item term="折扣上限">{{model.discountPriceLimit}}</detail-list-item>

        <detail-list-item term="是否删除">{{model.isDelete ==0?"未删除":"已删除"}}</detail-list-item>

        <detail-list-item term="生效开始时间">{{model.validStartTime}}</detail-list-item>

        <detail-list-item term="生效结束时间">{{model.validEndTime}}</detail-list-item>

        <detail-list-item term="使用时间">{{model.usedTime}}</detail-list-item>
      </detail-list>
    </a-card>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { getAction } from '@/api/manage'
  const DetailListItem = DetailList.Item
  export default {
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable
    },
    data () {
      return {
        couponCardTitle:{},
        couponCardStatus:{},
        model:{},
      }
    },
    created(){
      this.getCouponCardDetails(this.$route.query.record.id);
    },
    mounted(){
    },
    activated(){
      this.getCouponCardDetails(this.$route.query.record.id);
    },
    methods:{
      getCouponCardDetails(ids) {
        let toParams = {id:ids};
        this.$nextTick(function () {
          getAction("/admins/coupon/coupon/getCouponInfo",toParams )
            .then(res => {
              if (res.success) {
                this.model = res.result
                this.couponCardTitle = this.model.title
                this.couponCardStatus = this.model.status
              }
            })
            .catch(err => {
            });
        })
      },
      //关闭标签
      closeTab(){
        this.$router.back()
      },
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },

  }
</script>

<style lang="scss" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>